import React, { useEffect, useState } from 'react'
import request from '../../../api/request'
import { useSearchParams } from 'react-router-dom'
import style from './detail.module.css'
import Navbar from '../../../compounts/navber/Navbar'

function Index() {
    // 获取地址栏参数
    const [sp] = useSearchParams()
    const infoId = sp.get('id')
    console.log('详情页ID:', infoId);

    // 详情页数据
    const [detail, setDetail] = useState({})
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState('')

    useEffect(() => {
        if (!infoId) {
            setError('没有找到文章ID')
            setLoading(false)
            return
        }

        request.get('/share/information/v1/findInformation', {
            params: {
                infoId: infoId
            }
        }).then((res) => {
            console.log('详情页数据:', res);
            if (res.data && res.data.result) {
                setDetail(res.data.result)
            } else {
                setError('获取文章详情失败')
            }
            setLoading(false)
        }).catch(err => {
            console.error('请求失败:', err)
            setError('网络错误，获取文章详情失败')
            setLoading(false)
        })
    }, [infoId])

    if (loading) {
        return <div className="loading">加载中...</div>
    }

    if (error) {
        return <div className="error">{error}</div>
    }

    return (
        <div>
            <div className={style.container}>
                <Navbar title={'咨询详情'}></Navbar>
                <h1 className={style.title}>{detail.title || '文章标题'}</h1>
                <div className={style.authorbox}>
                    <span className={style.author}>作者：{detail.source}</span>
                    <span>5.2W阅读量</span>
                </div>
                <div className={style.article} dangerouslySetInnerHTML={{ __html: detail.content || '' }} />

            </div>
            <div style={{ width: '100%', height: '16px', background: '#ccc' }}></div>
            123
        </div>

    )
}

export default Index
